<template>
  <div class="title1">
    <el-row>
      <el-col :span="24">
        <div class="title2">
          <div class="text">声音设置</div>
        </div>
        <div style="display: flex;justify-content: space-between;height: 102px;">
          <div>
            <div class="title3" style="margin-left: 44px;">
              <span class="text" style="font-weight: 600;">弹框提示音</span>
            </div>
            <div class="title3" style="margin-left: 44px;margin-top: 19px;">
              <div class="block">
                <img src="@/static/image/yinliang.png" alt="">
                <el-slider v-model="value1" :show-tooltip="false" class="slider" />
                <div class="text">{{ this.value1 }}%</div>
              </div>
            </div>
          </div>
          <div class="title4">
            <button class="bt">保存</button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  components: {},
  data() {
    return {
      value1: 30
    }
  },

  computed: {},

  created() {},

  methods: {}
}

</script>
<style  scoped lang="scss">
.title1{
  margin-left: 48px;
}
.title2{
  display: flex;
  justify-content: space-between;
height: 57px;
background: #F5F5F5;
border-radius: 4px 4px 0px 0px;
line-height: 57px;
.text{
margin-left: 25px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 800;
color: #333333;
}
.text1{
  border: 1px #F5F5F5 solid;
  font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2087D0;
margin-right: 30px;
background-color: #F5F5F5;
}
}
.title3{
  margin: 30px 0 0 73px;
  display: flex;
  .block {
  display: flex;

  .demonstration {
    margin-left: 149px;
    font-weight: 600;
  }

  .slider {
    width: 600px;
    height: 6px;
    margin-left: 23px;
    margin-top: -10px;
  }

  .text {
    margin-left: 17px;
  }
}
}
.title4{
  line-height: 102px;
  .bt{
    width: 96px;
height: 42px;
background: #2087D0;
border-radius: 21px;
border: 1px solid #2087D0;
margin-right: 30px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #fff;
  }
}
</style>
